<template>
  <container-wrapper :designer="designer" :widget="widget" :parent-widget="parentWidget" :parent-list="parentList"
                     :index-of-parent-list="indexOfParentList">
    <div :key="widget.id" class="grid-container" :class="[selected ? 'selected' : '', customClass]"
         :style="[gridAdvStyle,widget.options.spaceStyle]"
         @click.stop="selectWidget(widget)"
    >
      <template v-for="(colWidget, colIdx) in widget.cols" :key="colWidget.id">
        <grid-adv-col-widget :widget="colWidget" :designer="designer" :parent-list="widget.cols"
                             :index-of-parent-list="colIdx" :parent-widget="widget"
                             :col-height="widget.options.colHeight"></grid-adv-col-widget>
      </template>
    </div>

  </container-wrapper>
</template>
<script>
import i18n from "@/utils/i18n";
import containerMixin from "@/components/form-designer/form-widget/container-widget/containerMixin";
import refMixinDesign from "@/components/form-designer/refMixinDesign";
import ContainerWrapper from "@/components/form-designer/form-widget/container-widget/container-wrapper.vue";
import GridAdvColWidget from "@/components/form-designer/form-widget/container-widget/grid-adv-col-widget.vue";

export default defineComponent({
  name: "grid-adv-widget",
  componentName: 'ContainerWidget',
  mixins: [i18n, containerMixin, refMixinDesign],
  inject: ['refList'],
  components: {
    GridAdvColWidget,
    ContainerWrapper,
  },
  props: {
    widget: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,
  },
  computed: {
    selected() {
      return this.widget.id === this.designer.selectedId
    },

    customClass() {
      return this.widget.options.customClass || ''
    },
    gridAdvStyle() {
      return this.widget.options.gridAdvStyle
    }
  },
  created() {
    this.initRefList()
  },
})
</script>


<style lang="scss" scoped>
.grid-container {
  min-height: 38px;
  outline: 1px dashed #336699;
  display: grid;

  .form-widget-list, .drag-drop-zone {
    min-height: 28px;
  }
}

.grid-container.selected, .grid-cell.selected {
  outline: 2px solid var(--ep-color-primary) !important;
}
</style>
